@import 'styles/settings';
@import 'styles/typography-extends';

.container {
  display: flex;
  flex-direction: column;
  margin-bottom: $sidebar-margin;
  @media print {
    margin: 0;
  }
}

.species {
  display: flex;
  flex-direction: row;
  margin-top: $sidebar-margin;
  @media print {
    margin: 0 0 15pt 0;
  }
}

.image {
  object-fit: cover;
  width: 100px;
  height: 100px;
  border-radius: 50%;
  @media print {
    width: 40pt;
    height: 40pt;
  }
}

.dataSection {
  padding-left: $sidebar-paddings;

  p {
    margin: 0;
  }

  .name {
    @extend %title;
  }
  
  .scientificName {
    @extend %annotation;
    font-style: italic;
  }

  .rangeSentence,
  .range {
    @extend %bodyText;
    @media print {
      display: inline;
      padding-right: 2pt;;
    }
  }

}